<template>
  <el-container>
    <el-main v-if="state.data">
      <div style="min-height: 300px;">
        <el-table border :data="state.data.groupTicket" style="width: 100%;">
          <el-table-column prop="id" label="id" width="80" align="center" />
          <el-table-column prop="status.text" label="类型" width="80" align="center" />
          <el-table-column prop="code" label="劵码" width="320" align="center" />
          <el-table-column prop="write_price" label="核销/退款金额" width="140" align="center" />
          <el-table-column prop="write_people" label="核销/退款人员" width="140" align="center" />
          <el-table-column prop="write_mobile" label="用户电话" width="140" align="center" />
          <el-table-column prop="use_time" label="核销/退款时间" width="200" align="center" >
            <template #default="scope">
              {{ use_time ? dayjs(scope.row.use_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '' }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from './groupOrder.service';
  import dayjs from 'dayjs'

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });

  const state = reactive({
    data:null
  })

  onMounted(() => {
    if (props.modal.params.id) {
      getData();
    }
  });

  const getData = async () => {
    const { error, data } = await api.record(props.modal.params.id);

    if (error === 0) {
      state.data = data;
    }
  };
</script>

<style scoped lang="scss">
  .goods-image {
    width: 60px;
    height: 60px;
    border-radius: 4px;
  }

  :deep() .el-descriptions__cell {
    display: flex;
  }

  :deep() .el-descriptions__content {
    display: flex;
  }
</style>
